<template>
  <div class="container">
    <div id="scrollbox">
      <ul :class="['ullist']">
        <vue-seamless-scroll :data="items" :class-option="optionHover">
          <li v-for="(item, index) in items" :key="index">
            <img src="@/assets/big_data/scroll.png" alt="" />
            <p>
              {{ item.name }}
            </p>
            <span>二维码扫描<span style="color: red">{{ item.time }}</span>次</span>
          </li>
        </vue-seamless-scroll>
      </ul>
    </div>
  </div>
</template>

<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
  props: {
    datalist: {
      type: Array,
      requried: true,
      default: function () {
        return [];
      },
    },
  },
  components: {
    vueSeamless
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      items: this.datalist,
      animate: false,

    };
  },
  watch: {
    // datalist: {
    //   handler(val, oldVal) {
    //     this.items = val;
    //   },
    //   deep: true,
    // },
  },
  methods: {
    scroll() {
      this.animate = true;
      setTimeout(() => {
        // this.items.push(this.items[0]);
        // this.items.shift();
        this.animate = false;
      }, 500);
    },
  },
  created() {
    setInterval(this.scroll, 1000);
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.anim {
  transition: all 0.5s;
  margin-top: -30px;
}

.ullist {
  img {
    width: 0.291667rem;
  }

  li {
    display: flex;
    align-items: center;
    line-height: 30px;
    height: 30px;

    p {
      flex: 1;
      padding: 0 0.15625rem;
      font-size: 0.15625rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #00beff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    span {
      font-size: 0.135417rem;
      font-family: Arial;
      font-weight: 400;
      color: #096ebc;
    }
  }
}
</style>
